<script setup lang="ts">
import {ref} from "vue";
import {useUiConfigState} from "@/stores/uiConfigState";
import pinia from "@/stores";
import {useDark} from "@vueuse/core";

const uiConfigState = useUiConfigState(pinia)

let showSetting = ref(false)
</script>

<template>
  <div class="setting-view">
    <el-button type="primary" @click="showSetting = true">
      <el-icon>
        <Icon-Setting />
      </el-icon>
    </el-button>
    <el-drawer v-model="showSetting" size="200">
      <el-form label-width="70">
        <el-form-item label="菜单">
          <el-switch v-model="uiConfigState.menuCollapse" :active-value="true" :inactive-text="false"/>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-switch v-model="uiConfigState.menuShowIcon" :active-value="true" :inactive-text="false"/>
        </el-form-item>
        <el-form-item label="页签图标">
          <el-switch v-model="uiConfigState.tagViewShowIcon" :active-value="true" :inactive-text="false"/>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<style scoped>
.setting-view{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}
</style>